<template>
	<view style="position: relative;">
		<image style="display: block;width: 100%;" mode='widthFix' :src="info.activityImage" alt="">
			<div class="right-box">
				<div @click="show = true">活动规则</div>
				<div @click="invitationMethod">邀请记录</div>
			</div>
			<div class="btn-class">
				<img class="animateBtn" @click='btnClick' style="display: block;" mode='widthFix'
					:src="info.buttonImage" alt="">
			</div>
			<view>
				<u-popup :show="show" mode="center" round='10px' :customStyle="{width:'80vw'}" closeable
					:safeAreaInsetBottom='false' @close='popupClose'>
					<view style="margin-top: 20px;">
						<div style="padding: 20rpx;">
							<rich-text style="width: 100%;" :nodes="info.content"></rich-text>
						</div>
						<div style="margin-top: 20px;">
							<u-button color='#1f62ff' @click="popupClose" text="我知道了"></u-button>
						</div>
					</view>
				</u-popup>
			</view>
	</view>
</template>

<script>
	import {
		homeIndex
	} from "@/api/axios/operation.js";
	var QQMapWX = require("../../api/qqmap-wx-jssdk.min.js");
	var qqmapsdk = new QQMapWX({
		key: "LLDBZ-YFGW4-57ZUW-FFH4P-XPUL5-A4BQT",
	});
	import store from "@/store/index.js";
	export default {
		components: {},
		props: {},
		data() {
			return {
				baseUrl: this.staticURL,
				show: false,
				info: {},
				startDate: "",
				mapData: {},
				localCoordinate: '',
				locationObj: null,
				deviceInfo: ''
			};
		},
		methods: {
			popupClose() {
				this.show = false;
			},
			invitationMethod() {
				uni.navigateTo({
					url: "/pages-operation/invitation-record/index",
				});
			},
			btnClick() {
				uni.navigateTo({
					url: "/pages-operation/my-poster/index?activityImageId=" + this.info.id,
				});
			},
		},
		watch: {},
		onHide: function() {
			console.log("home  Hide");
			console.log('123----');
			console.log({
				activityImageId: this.info.id,
				startDate: this.startDate,
				location: this.locationObj,
				longitudeAndLatitude: this.localCoordinate,
				endDate: this.currentTime(),
				deviceInfo: this.deviceInfo
			});
			this.saveActivityClue({
				activityImageId: this.info.id,
				startDate: this.startDate,
				location: this.locationObj,
				longitudeAndLatitude: this.localCoordinate,
				endDate: this.currentTime(),
				deviceInfo: this.deviceInfo
			})

		},
		onShow: function() {
			console.log("home  Hide");
			this.startDate = this.currentTime()
			// if (this.info.id) {
			// 	this.saveActivityClue({
			// 		activityImageId: this.info.id,
			// 	})
			// }

		},
		onLoad() {
			homeIndex({}).then((res) => {
				this.info = res;
				this.startDate = this.currentTime()
				// this.saveActivityClue({
				// 	activityImageId: res.id,
				// })
			});

			// 手机信息
			let _this = this
			wx.getSystemInfo({
				success: function(res) {
					console.log("wx.getSystemInfo")
					console.log(res)
					_this.deviceInfo = res.brand
				}
			});
			// 获取地理信息
			uni.getLocation({
				type: "gcj02",
				success: function(res) {
					qqmapsdk.reverseGeocoder({
						location: {
							latitude: res.latitude,
							longitude: res.longitude,
						},
						complete(mapData) {
							mapData.result.location = {
								lat: res.latitude,
								lng: res.longitude,
							};

							_this.mapData = mapData.result;
							store.state.mapData = mapData.result;
							_this.localCoordinate = mapData.result.location.lat + ',' + mapData.result
								.location.lng
							_this.locationObj = {
								city: mapData.result.address_component.city,
								district: mapData.result.address_component.district,
								province: mapData.result.address_component.province,
								address: mapData.result.formatted_addresses.standard_address,
							}
							uni.setStorageSync("mapData", this.localCoordinate);
							uni.setStorageSync("locationObj", _this.locationObj);
							console.log('mapData', mapData);
						},
					});
				},
			});

		},
	};
</script>

<style lang="scss" scoped>
	.button {
		display: flex;
	}

	.btn-class {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 10rpx 100rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		// background-color: #fff;
	}

	.right-box {
		position: absolute;
		right: 0;
		top: 60px;

		div {
			background-color: rgba(0, 0, 0, 0.6);
			color: #fff;
			margin-bottom: 10px;
			padding: 16rpx 20rpx;
			border-radius: 10px 0 0 10px;
		}
	}

	@keyframes animateBreathing {
		0% {
			transform: scale(1, 1);
		}

		50% {
			transform: scale(0.9, 0.9);
		}

		100% {
			transform: scale(1, 1);
		}
	}

	.animateBtn {
		animation: animateBreathing 2s;
		animation-iteration-count: infinite;
	}
</style>